import React, { useState, useEffect } from 'react'

export default function Swiper() {
    const [count, setCount] = useState(0)
    let timer = null
    const list = [
        "https://img2.baidu.com/it/u=1572613686,938558453&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400",
        "https://img2.baidu.com/it/u=1713796643,4188877777&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=436635185,1433075744&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500"
        ]
    const add = () => {
        if (count == (list.length - 1)) {
            setCount(0)
        } else {
            setCount(count + 1)
        }
    }

    // 初始化
    useEffect(() => {
        timer = setInterval(() => {
            add()
        }, 1500)
    }, [count])

    useEffect(() => {
        return () => {
            clearInterval(timer)
        }
    })
    return (
        <div>
            <img style={{
                width: 450,
                height: 300
            }} src = { list[count] } alt="" />
            <button onClick={ add }>向右</button>

            <ul>
                {
                    list.map((item, index) => {
                        return <li key={index}>
                            <span onClick={ () => {
                                setCount(index)
                            } }>
                                { index }
                            </span>
                        </li>
                    })
                }
            </ul>
        </div>
    )
}
